<template>
    <div class="app-container">
        <div class="head-container">
            <comm-search v-if="showSearch" @search="initList()" :query-param="queryParam">
                <template #left>
                  <el-form-item prop="username">
                    <el-input v-model="queryParam.username" clearable placeholder="用户名" @keyup.enter.native="initList()"/>
                  </el-form-item>
                </template>
            </comm-search>
        </div>
        <comm-tool :selections="selections" v-model:show-search="showSearch" :del-url="baseUrl" @refresh="initList()"
                   @toAdd="toAddExt()" :showEdit="false"/>
        <!--表单组件-->
        <comm-edit-dialog v-model:dialog-show="editDialogShow"
                          title="人员信息" @save="toSave" :save-loading="saveLoading">
            <template #content>
                <el-form ref="form" :inline="true" :model="formData" :rules="rules" label-width="80px">
                    <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username" placeholder="请输入用户名"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="formData.password" placeholder="请输入密码"/>
                            <label style="color: red;" v-if="isEdit">密码为空则不更改密码</label>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="formData.phone" placeholder="请输入联系电话"/>
                    </el-form-item>
                </el-form>
            </template>
        </comm-edit-dialog>
        <!--表格渲染-->
        <el-table :loading="loading" :data="dataList" @selectionChange="selectionChange" table-layout="auto">
            <el-table-column type="selection" width="55"/>
                        <el-table-column prop="username" label="用户名"/>
                        <el-table-column prop="phone" label="联系电话"/>
                        <el-table-column prop="createTime" label="创建时间"/>
                        <el-table-column prop="updateTime" label="更新时间"/>
            <el-table-column label="操作" align="center" fixed="right">
                <template #default="scope">
                    <comm-operation
                        :data="scope.row"
                        :url="baseUrl"
                        @edit="toEditExt(scope.row)"
                        @refresh="initList()">
                    </comm-operation>
                    <el-button type="text" style="color: #67c23a;" @click="toHistory(scope.row)">答题记录</el-button>
                    <el-button type="text" style="color: #ffb000;" @click="toRed(scope.row)">红包记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-model:page="queryParam.page" v-model:limit="queryParam.size" :total="total" @change="initList()"/>
        <el-dialog v-model="historyDialogVisible" :title="title" width="1000px">
          <history ref="historyObj" :userId="userId"></history>
        </el-dialog>
        <el-dialog v-model="redDialogVisible" :title="redTitle" width="1200px">
          <red ref="redObj" :userId="userId"></red>
        </el-dialog>
    </div>
</template>


<script setup>
    import {ref, toRefs, reactive, getCurrentInstance} from 'vue'
    import Pagination from '@/components/Pagination'
    import mixins from "@/mixins/mixins";
    import CommSearch from "@/components/Comm/CommSearch.vue";
    import CommTool from "@/components/Comm/CommTool.vue";
    import CommEditDialog from "@/components/Comm/CommEditDialog.vue";
    import CommOperation from "@/components/Comm/CommOperation.vue";
    import history from '../user/history.vue'
    import red from '../user/red.vue'

    const rules = ref({})

    const {initList, total, dataList, data, selectionChange, toAdd, toEdit, toSave} = mixins()
    const {queryParam, loading, saveLoading, selections, showSearch, editDialogShow, formData, baseUrl} = toRefs(data)


    const {proxy} = getCurrentInstance();

    const isEdit = ref(false)

    baseUrl.value = '/userExt'

    initList()
    const toAddExt = () =>{
      isEdit.value = false
      rules.value = {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '联系电话不能为空', trigger: 'blur'}
        ],
      }
      toAdd()
    }
    const toEditExt = (row) =>{
      isEdit.value = true
      rules.value = {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '联系电话不能为空', trigger: 'blur'}
        ],
      }
      row.password = ''
      toEdit(row)
    }
    const historyDialogVisible = ref(false)
    const title = ref("答题记录")
    const userId = ref(0)
    const historyObj = ref()

    const toHistory = (row) => {
      title.value = row.username + " - 答题记录"
      historyDialogVisible.value = true
      userId.value = row.id
      if (historyObj.value) {
        historyObj.value.initPage(row.id);
      }
    }
    const redDialogVisible = ref(false)
    const redTitle = ref("红包记录")
    const redObj = ref()
    const toRed = (row) => {
      redTitle.value = row.username + " - 红包记录"
      redDialogVisible.value = true
      userId.value = row.id
      if (redObj.value) {
        redObj.value.initPage(row.id);
      }
    }
</script>

